<template>
  <view class="container">
    <!-- 功能1：选择本地图片并预览 -->    <view class="func-section">
      <button @click="chooseLocalImage">选择本地图片</button>
      <image v-if="localImgUrl" :src="localImgUrl" mode="widthFix" class="preview-img" />
    </view>

    <view class="func-section">
      <button @click="downloadNetImage">下载网络图片</button>
      <image v-if="netImgUrl" :src="netImgUrl" mode="widthFix" class="preview-img" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      localImgUrl: '', 
      netImgUrl: ''    
    };
  },
  methods: {
 
    chooseLocalImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.localImgUrl = tempFilePath;
      
          uni.previewImage({
            current: tempFilePath,
            urls: [tempFilePath]
          });
        }
      });
    },

    downloadNetImage() {
      uni.downloadFile({
        url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
        success: (res) => {
          if (res.statusCode === 200) {
            this.netImgUrl = res.tempFilePath;
            console.log('下载成功，临时路径：', res.tempFilePath);
          }
        },
        progress: (res) => {
          console.log('下载进度：', res.progress, '%'); 
        },
        fail: (err) => {
          console.error('下载失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.func-section {
  margin-bottom: 30rpx;
}
.preview-img {
  width: 100%;
  margin-top: 15rpx;
  border-radius: 8rpx;
}
</style>